<template>
  <div class="index">
    <div>
      <button @click="toAdd">添加</button>
    </div>
    <div class="top">
      <div>id</div>
      <div>书名</div>
      <div>作者</div>
      <div>价格</div>
      <div>操作</div>
    </div>
    <div class="main">
      <div class="item"
           v-for="book in books"
           :key="book.id+'a1'">
        <div>{{book.id}}</div>
        <div>{{book.name}}</div>
        <div>{{book.author}}</div>
        <div>{{book.price}}</div>
        <div>
          <span @click="del(book.id)">删除</span>
          <span @click="toUpdate(book.id)">修改</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  created () {
    this.getBooks();
  },
  data () {
    return {
      books: []
    }
  },
  methods: {
    getBooks () {
      this.axios.post('http://localhost:8082/query/book', {}).then(res => {
        this.books = res.data
      })
    },
    toAdd () {
      this.$router.push('/add')
    },
    del (id) {
      console.log('-------------', id);
      this.axios.get('http://localhost:8082/book/del?id=' + id).then(res => {
        if (res.data.affectedRows = 1) {
          this.getBooks();
        }
      })
    },
    toUpdate (id) {
      this.$router.push({ path: 'update', query: { id: id } })
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  height: 50px;
  width: 350px;
  display: flex;
  text-align: center;
  line-height: 50px;
  // border-top: 1px solid black;
  // border-bottom: 1px solid black;
  // border-left: 1px solid black;
  div {
    flex: 1;
    // border-right: 1px solid black;
  }
}
.item {
  display: flex;
  width: 350px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  div {
    flex: 1;
  }
}
</style>